<template>
  <div>
    <!-- 头部 -->
    <HomeHeader />
    <!-- 标签部分 -->
    <van-tabs v-model="tabShowIndex" sticky>
      <van-tab
        v-for="category in categoryList"
        :key="category.id"
        :title="category.name"
      >
        <!-- immdiate-check控制页面在划到底部的时候才进行加载第二页，每当页面划到底部的时候触发@load里面的事件，让页面加载到第二页  -->
        <van-list
          @load="loadMore"
          :immediate-check="false"
          v-model="category.loading"
          :finished="category.finished"
          finished-text="我是有底线的"
        >
          <PostItem
            :postData="post"
            v-for="post in category.postList"
            :key="post.id"
          />
        </van-list>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import PostItem from "../components/PostItem";
import HomeHeader from "../components/HomeHeader";
export default {
  data() {
    return {
      tabShowIndex: 0,
      categoryList: [],
    };
  },
  components: {
    HomeHeader,
    PostItem,
  },
  watch: {
    //监视tabShowIndex变化，调用函数重新发送请求获取新的数据
    tabShowIndex(newVal) {
      // 如果点击的是最后一个索引, 就需要跳转页面
      if (newVal == this.categoryList.length - 1) {
        this.$router.push("/manage");
      } else {
        if (currentCategory.postList.length == 0) {
          this.loadPost();
        }
      }
      // const currentCategory = this.categoryList[this.tabShowIndex];
      // if (currentCategory.postList.length == 0) {
      //   this.loadPost();
      // }
    },
  },
  created() {
    // 如果本地存储有栏目数据，可以先在里面拿
    if (localStorage.getItem("activeList")) {
      // 为了和之后的逻辑对接, 还是将数据构造成 res.data.data
      const res = {
        data: {
          data: JSON.parse(localStorage.getItem("activeList")),
        },
      };
      this.categoryList = res.data.data.map((item) => {
        return {
          ...item,
          postList: [],
          pageIndex: 1,
          pageSize: 6,
          // 储存当前分类是否要加载，如果是当页面划到底部的时候loading等于true，再配合v-model让分类只发送一次
          loading: false,
          finished: false,
        };
      });
      this.categoryList.push({
        name: "+",
      });
      console.log(this.categoryList);
      //获取分类后，再根据分类获取对应的文章
      this.loadPost();
    } else {
      this.$axios({
        url: "/category",
      }).then((res) => {
        // console.log(res.data);
        // this.categoryList = res.data.data;
        //因为每个分类都有对应的文章，所以不能统一写在上面的data里面，应该往分类里面添加对应的文章列表对象
        this.categoryList = res.data.data.map((item) => {
          return {
            ...item,
            postList: [],
            pageIndex: 1,
            pageSize: 6,
            // 储存当前分类是否要加载，如果是当页面划到底部的时候loading等于true，再配合v-model让分类只发送一次
            loading: false,
            finished: false,
          };
        });
        this.categoryList.push({
          name: "+",
        });
        console.log(this.categoryList);
        //获取分类后，再根据分类获取对应的文章
        this.loadPost();
      });
    }
  },
  methods: {
    loadMore() {
      const currentCategory = this.categoryList[this.tabShowIndex];
      currentCategory.pageIndex++;
      this.loadPost();
    },
    loadPost() {
      const currentCategory = this.categoryList[this.tabShowIndex];
      this.$axios({
        url: "/post",
        params: {
          category: currentCategory.id,
          pageSize: currentCategory.pageSize,
          pageIndex: currentCategory.pageIndex,
        },
      }).then((res) => {
        // currentCategory.postList = res.data.data;
        // console.log(this.categoryList);
        // 因为每次拉到底部的时候，都会让文章重新加载并覆盖前一页，想要吧后一页加上前一页
        // ...展开运算符让两个数组拆开相加相当于 数组1 concat 数组2
        currentCategory.postList = [
          ...currentCategory.postList,
          ...res.data.data,
        ];
        // 拼接完后，代表发送完毕应该告诉组件v-model，不要让他不能让他限制不加载下去
        currentCategory.loading = false;
        // 如果页面加载到最后了应该告诉组件已e经到底了,将finished 改为 true
        if (res.data.data.length < currentCategory.pageSize) {
          currentCategory.finished = true;
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
/deep/ .van-tab:nth-last-child(2) {
  background-color: #fff;
  position: sticky;
  right: -8px;
  width: 44px;
  line-height: 44px;
}
</style>